import { View } from '@tarojs/components'
import Taro, { Component } from '@tarojs/taro'
import { AtFab, AtList, AtListItem, AtToast } from "taro-ui"

const http = require('../../utils/http.js')
const constant = require('../../utils/constant.js')

export default class TypeList extends Component {
    config = {
        navigationBarTitleText: '分类管理'
    }

    constructor() {
        super(...arguments)
        this.state = {
            loading: false,
            data: [
                { id: 2, name: "test", noteNumber: 12 }
            ]
        }
    }

    componentDidMount() { }
    componentDidShow() {
        this.fetch()
    }
    fetch = () => {
        this.setState({ loading: true })
        http.get2("/api/note/type/statistics")
            .then(res => {
                this.setState({
                    loading: false,
                    data: res
                })
            })
    }
    showType = (id, name) => {
        Taro.navigateTo({ url: `/pages/type/type-edit?id=${id}&name=${name}` })
    }
    copyWebsite = () => {
        Taro.setClipboardData({ data: constant.WEBSITE_TYPES }).then(() => {
            Taro.showToast({ title: '链接已复制' })
        })
    }

    render() {
        return (
            <View>
                <AtToast isOpened={this.state.loading} text="加载中" icon="loading"></AtToast>
                <AtList hasBorder={false} >
                    {
                        this.state.data.map(type => {
                            return (
                                <AtListItem key={'type-' + type.id}
                                    title={type.name}
                                    note={'笔记数：' + (type.noteNumber || 0)}
                                    onClick={() => this.showType(type.id, type.name)}
                                    arrow="right" />
                            )
                        })
                    }
                </AtList>
                {/* <View style={{ position: 'fixed', bottom: '30rpx', right: '30rpx' }}>
                    <AtFab onClick={() => this.showType('', '')}>
                        <Text className='at-fab__icon at-icon at-icon-add'></Text>
                    </AtFab>
                </View> */}
                <View style={{ marginTop: '20rpx', marginBottom: '10rpx' }}>
                    <View className='at-article'>
                        <View className='at-article__p'>
                            迁移笔记和删除分类请访问官网：
                        </View>
                        <View className='at-article__p' style={{ color: '#FF00EF' }} onClick={this.copyWebsite}>
                            {constant.WEBSITE_TYPES}
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}